<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/tool.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/happy.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="login.html">登陆</a>
        <!-- <a href="#">注销</a> -->
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img src="/user/photoUpload" class="avtar" alt="">
                <h3></h3>
                <a href="#">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                </div>
                <div class="counter">
                    <span class="total"></span>
                </div>
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <!-- 每一篇博客包含标题, 摘要, 时间 -->

            
        </div>
    </div>
</body>
<script>
    var descLength = 80; // 简介最大长度
    // 字符串截取，将文章正文截取成简介
    function mySubstr(content){
        if(content.length>descLength){
            return content.substr(0,descLength);
        }
        return content;
    }
    function getList(){
        $.ajax({
           url:"/art/getMyList",
            method:"POST",
            data:{

            },
            success:function (result) {
                if (result.code == 200 && result.data != null) {
                    //开始拼接
                    let content = result.data;
                    console.log(content);
                    let container = document.querySelector('.container-right');

                    for (let blog of content) {
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';
                        if(blog.state==0){
                            let titleDiv = document.createElement('div');
                            titleDiv.className = 'title';
                            titleDiv.innerHTML = blog.title+"(草稿)";
                            blogDiv.appendChild(titleDiv);
                        }else{
                            // 创建博客标题
                            let titleDiv = document.createElement('div');
                            titleDiv.className = 'title';
                            titleDiv.innerHTML = blog.title;
                            blogDiv.appendChild(titleDiv);
                        }

                        // 创建日期
                        let dateDiv = document.createElement('div');//外层
                        dateDiv.className = 'date';
                        //点赞数
                        let thumbSpan = document.createElement('span');
                        thumbSpan.className = 'thumb';
                        thumbSpan.innerHTML = "点赞数："+blog.thumb+" ";
                        //创建时间
                        let dateSpan = document.createElement('span');
                        dateSpan.className = 'data';
                        dateSpan.innerHTML = blog.updatetime;


                        //阅读量
                        let rcountSpan = document.createElement('span');
                        rcountSpan.className = 'rcount';
                        rcountSpan.innerHTML = "阅读量:"+blog.rcount+" ";

                        //拼接
                        dateDiv.appendChild(dateSpan);
                        dateDiv.appendChild(thumbSpan);
                        dateDiv.appendChild(rcountSpan);
                        blogDiv.appendChild(dateDiv);
                        // 创建摘要
                        let descDiv = document.createElement('div');
                        descDiv.className = 'desc';
                        descDiv.innerHTML = mySubstr(blog.content);
                        blogDiv.appendChild(descDiv);
                        // 创建查看全文按钮
                        let a = document.createElement('a');
                        let a2 = document.createElement('a');
                        a.className = 'detail';
                        a2.className = 'update';
                        a.innerHTML = '查看全文 >>';
                        a2.innerHTML = '修改文章 >>';
                        a.href = 'blog_content.html?id=' + blog.id;
                        a2.href = 'blog_update.html?id=' + blog.id;
                        blogDiv.appendChild(a);
                        blogDiv.appendChild(a2);
                        // 把 blogDiv 加入外层元素
                        container.appendChild(blogDiv);
                    }
                }
                else
                    {
                        jQuery(".container-right").html("<h1>暂无数据</h1>");
                    }
                },
            error:function(err) {
                if (err != null && err.status == 401) {
                    alert("用户未登录，即将跳转到登录页！");
                    // 已经被拦截器拦截了，未登录
                    location.href = "/login.html";
                }
            }

        });
    }
    getList()
    /**
     * 获取左侧的个人信息
     */
    function getUserinfo(){
        //名字，gitee地址，文章数
        $.ajax({
            url:"/user/getUserinfo",
            method: "POST",
            data: {},
            success:function (result){
                if(result.code==200 && result.data!=null){
                    var userinfo=result.data;
                    console.log(userinfo)
                    let h3=document.querySelector(".card h3");
                    h3.innerHTML=userinfo.username;
                    let count=document.querySelector(".card .counter .total");
                    count.innerHTML=userinfo.bcount;
                    let a=document.querySelector(".card a");
                    a.href=userinfo.useraddre;
                }else {
                    alert("操作出错");
                }
            }
        });
    };
    getUserinfo()
</script>

</html>